<template>
	<view class="level-main">
		<view class="dfj-flex dfj-flex-ai-c dfj-pd-30 dfj-t-white dfj-f-30">
			<view class="dfj-flex-1 dfj-t-l" @click="leftBack"><text class="dfj-icon icon-arrow-left"></text></view>
			<view>VIP会员</view>
			<view class="dfj-flex-1 dfj-t-r"></view>
		</view>
 
		<view class="dfj-flex dfj-flex-ai-c dfj-t-white dfj-pd-30">
			<view>
				<image style="width: 120rpx;height: 120rpx;border-radius: 100%;" :src="loginInfo.userInfo.headIcon || '/static/img/login.png'"></image>
			</view>
			<view class="dfj-flex-1 dfj-mg-l-30">
				<view>{{ loginInfo.userInfo.userName }}</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-mg-t-20">
					<view class="dfj-flex-1">
						<image style="width: 120rpx;height: auto;" mode="widthFix" :src="loginInfo.userInfo.isVip==1?loginInfo.levelVipIconUrl:loginInfo.levelIconUrl"></image>
					</view>
					<view class="dfj-flex dfj-f-20">
						<view><text class="dfj-icon icon-xuanzhong dfj-mg-r-10"></text>直推{{ loginInfo.directCount }}人</view>
						<view class="dfj-mg-l-20 dfj-t-warning"><text class="dfj-icon icon-xuanzhong dfj-mg-r-10"></text>间推{{ loginInfo.indirectCount }}人</view>
					</view>
				</view>
			</view>
		</view>

		<view class="dfj-mg-30 dfj-flex dfj-flex-ai-c dfj-bg-white dfj-bd-radius-20 dfj-pd-20" v-if="loginInfo.userInfo.isGetProduct == 0">
			<view class="dfj-flex-1 dfj-flex dfj-flex-ai-c">
				<view>
					<image src="/static/img/my/sp.png" style="width: 120rpx;height: auto;" mode="widthFix"></image>
				</view>
				<view class="dfj-flex-1 dfj-mg-l-25">
					<view class="dfj-t-333 dfj-f-32">商品折扣券</view>
					<view class="dfj-t-999 dfj-f-26 dfj-mg-t-20">开通VIP即送大礼包</view>
				</view>
			</view>
			<view>
				<button type="primary" @click="getOpen()">领取</button>
			</view>
		</view>

		<view class="dfj-pd-lr-30">
			<button type="primary" v-if="loginInfo.userInfo.isVip == 0" @click="toDredgeVip">终身VIP ￥199立即开通</button>
		</view>

		<view class="level-table dfj-bg-white dfj-bd-radius-20 dfj-mg-lr-30 dfj-mg-t-30">
			<view class="dfj-pd-lr-20">
				<view class="dfj-t-333 dfj-f-32 dfj-pd-tb-20">VIP等级条件及权益说明</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-20">
					<view>
						<image src="/static/img/my/td.png" style="width: 100rpx;height: auto;" mode="widthFix"></image>
					</view>
					<view class="dfj-flex-1 dfj-mg-lr-30">
						<view class="dfj-t-333 dfj-f-30">直推奖励</view>
						<view class="dfj-t-999 dfj-f-26">直推用户下单可享消费金额3.0%</view>
					</view>
					<view class="dfj-flex-1 dfj-mg-lr-30">
						<view class="dfj-t-333 dfj-f-30">间推奖励</view>
						<view class="dfj-t-999 dfj-f-26">间推用户下单可享消费金额1.0%</view>
					</view>
				</view>
			</view>
			<table>
				<tr>
					<th>等级</th>
					<th>日消费额度(元)</th>
					<th>团队人数</th>
					<th>团队奖励</th>
				</tr>
				<block v-for="(item,index) in list">
					<tr>
						<td><image style="width: 100rpx;height: auto;" mode="widthFix" :src="loginInfo.userInfo.isVip == 1?item.vipIconUrl:item.iconUrl"></image></td>
						<td>{{ item.vipQuota }}</td>
						<td>
							<view>直推 {{ item.vipNum }}</view>
							<view>间推 {{ item.vipGapNum }}</view>
						</td>
						<td>{{ item.vipTeamRewards }}%</td>
					</tr>
				</block>
			</table>
		</view>


		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white">
				<view class="dfj-t-666 dfj-t-c dfj-pd-30">领取商品</view>
				<view class="dfj-pd-30">
					<radio-group @change="radioChange">
						<label class="dfj-flex dfj-flex-ai-c" v-for="(item, index) in goodsList" :key="index">
							<view>
								<radio :value="String(item.id)" :checked="index === current" />
							</view>
							<view class="dfj-flex-1 dfj-flex dfj-flex-ai-c">
								<view>
									<image :src="item.productImgUrl" style="width: 200rpx;height: auto;" mode="widthFix"></image>
								</view>
								<view class="dfj-flex-1 dfj-t-666 dfj-mg-l-20">
									<view class="dfj-t-333 dfj-t-ellipsis dfj-t-ellipsis-2">{{ item.productName }}</view>
									<view class="dfj-t-danger dfj-mg-t-20">￥{{ item.price }}</view>
								</view>
							</view>
						</label>
					</radio-group>
				</view>
				<view class="dfj-pd-30">
					<block v-if="loginInfo.userInfo.isVip == 0"><button type="primary" @click="toDredgeVip">终身VIP￥198立即开通</button></block>
					<block v-else><button type="primary" @click="toIsAddress">领取</button></block>
					
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupAddress" type="bottom">
			<view class="dfj-bg-white dfj-pd-tb-50">
				<navigator url="/pages/home/address" hover-class="navigator-hover" class="dfj-bg-white dfj-mg-tb-20 dfj-bd-radius-20 dfj-flex dfj-flex-ai-c dfj-pd-20">
					<view class=""><image style="width: 80rpx;height: auto;" mode="widthFix" src="/static/img/home/c_OrderAddress.png"/></view>
					<view class="dfj-flex-1 dfj-pd-lr-20" v-if="address">
						<view class="dfj-flex dfj-flex-ai-c dfj-mg-b-15">
							<view class="dfj-f-35 dfj-t-333">{{ address.userName }}</view>
							<view class="dfj-f-26 dfj-t-666 dfj-mg-l-30">{{ address.mobilePhone }}</view>
						</view>
						<view class="dfj-t-999 dfj-f-26">{{ address.addressProvince }}{{ address.addressCity }}{{ address.addressCounty }}{{ address.address }}</view>
					</view>
					<view class="dfj-flex-1 dfj-pd-lr-20 dfj-t-666" v-else>请选择收货地址</view>
					<view>
						<text class="dfj-icon icon-arrow-right dfj-f-35"></text>
					</view>
				</navigator>
				<view class="dfj-pd-30" v-if="address">
					<button type="primary" @click="toGetGoods">立即领取</button>
				</view>
			</view>
		</uni-popup>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				loginInfo: '',
				goodsList: [],
				list: [],
				address: ''
			}
		},
		onLoad() {
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
			this.getGoodsList();
			this.getInfo();
		},
		onShow() {
			this.address = JSON.parse(sessionStorage.getItem('setAddress'))
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			getOpen() {
				this.$refs.popup.open()
			},
			radioChange: function(evt) {
				this.current = evt.detail.value;
			},
			getGoodsList(){
				this.$http({
					url: '/order/getGiveProductList',
					method: 'GET'
				}).then(res=> {
					this.goodsList = res.data;
				})
			},
			getInfo() {
				this.$http({
					url: '/userOpt/queryUserVipInfo'
				}).then(res=> {
					this.list = res.data;
				})
			},
			toDredgeVip(){
				uni.navigateTo({
					url: '/pages/my/vip-pay'
				})
			},
			toIsAddress(){
				this.$refs.popup.close()
				this.$refs.popupAddress.open()
			},
			toGetGoods(){
				this.$http({
					url: '/order/addGiveProduct',
					data: {
						productId: this.goodsList[this.current].productId,
						addressId: this.address.id
					}
				}).then(res=>{
					console.log(res)
					uni.showToast({
						title: '领取成功'
					})
					uni.switchTab({
						url: '/pages/my/my'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.level-main {
		background: url('/static/img/my/ic_level_top_2.png') top center no-repeat;
		background-size: 100% auto;
	}

	.level-table {
		table {
			width: 100%;

			tr {
				color: #666;

				th {
					text-align: center;
					font-weight: normal;
					padding: 50rpx 0;
					border: 1px solid #E5E5E5;
				}

				td {
					padding: 40rpx 0;
					text-align: center;
					border: 1px solid #E5E5E5;
				}
			}
		}
	}
</style>
